import React, { Component } from 'react'
import Show from '../../components/zuo'
class View extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        'clear',
        '0',
        '=',
        '+',
        '1',
        '2',
        '3',
        '-',
        '4',
        '5',
        '6',
        'x',
        '7',
        '8',
        '9',
        '/',
      ],
      arr: [0, 2, 3, 7, 11, 15],
      sty: '',
      num: null,
      lis: {
        arrnum: {
          shu: '',
          zu: [],
        },
        arrsize: [],
      },
    }
  }

  setProp(props, sty) {
    let { lis } = this.state
    this.state[sty] = props

    if (props == '=') {
      // console.log(props)
      return (
        <Show arrList={this.state.lis.arrnum.zu} sel={this.state.lis.arrsize} />
      )
    } else if (sty === 'num') {
      lis.arrnum.shu += props
      this.setState({ ...this.state, sty, lis })
    } else {
      lis.arrnum.zu.push(lis.arrnum.shu)
      lis.arrsize.push(props)

      lis.arrnum.shu = ''
      this.setState({ ...this.state, sty: props })
    }
    // console.log(this.state.lis)
  }

  render() {
    let { list, arr, num, sty, lis } = this.state
    // console.log(lis)
    return (
      <div>
        <div className="computer">
          <Show arrList={lis.arrnum.zu} sel={lis.arrsize} />
          <ul>
            {list.map((res, i) => {
              if (arr.indexOf(i) !== -1) {
                return (
                  <li
                    key={i}
                    onClick={() => {
                      this.setProp(res, 'sty')
                    }}
                    className="act"
                  >
                    {res}
                  </li>
                )
              } else {
                return (
                  <li
                    onClick={() => {
                      this.setProp(res, 'num')
                    }}
                    key={i}
                  >
                    {res}
                  </li>
                )
              }
            })}
          </ul>
        </div>
      </div>
    )
  }
}
export default View
